import React, { Component } from 'react';
import styles from './index.less';
import { ConfigProvider, Button } from 'antd';

// css变量 https://blog.csdn.net/qq_38499671/article/details/111994422

export default class extends Component {
  componentDidMount = () => {};

  // 读取 css3 变量
  getC3Var = () => {
    let root = document.documentElement;
    // 读取
    let rootStyle = window.getComputedStyle(root);
    let colorVar = rootStyle.getPropertyValue('--box-color').trim();
    console.log(colorVar);
    alert(colorVar)
  };

  // 删除 css3 变量
  removeC3Var = () => {
    let root = document.documentElement;
    root.style.removeProperty('--box-color');
    this.forceUpdate()
  };
  render() {
    return (
      <ConfigProvider>
        <div>
          <div>
            <Button
              type="primary"
              onClick={() => {
                ConfigProvider.config({
                  theme: {
                    primaryColor: '#00B970',
                  },
                });
              }}
            >
              切换antd主题
            </Button>
            <div className={styles.box}></div>

            <div style={{ marginTop: '30px' }}>
              <Button
                type="primary"
                onClick={() => {
                  var root = document.documentElement;
                  root.style.setProperty('--box-color', 'green');
                }}
              >
                设置c3变量
              </Button>
              <div className={styles.box2}></div>
            </div>

            <div style={{ marginTop: '30px' }}>
              <Button
                type="primary"
                onClick={() => {
                  this.getC3Var();
                }}
              >
                读取css3变量
              </Button>
            </div>

            <div style={{ marginTop: '30px' }}>
              <Button
                type="primary"
                onClick={() => {
                  this.removeC3Var();
                }}
              >
                删除css3变量
              </Button>
            </div>
          </div>
        </div>
      </ConfigProvider>
    );
  }
}
